<!-- 
    标签页
    组件独立功能，不需要与其他组件通信
 -->
<template>
    <div class="tags_box">
        <div class="scrollbar_box" ref="tags_item" @mousewheel="handleMouseWheel">
            <div v-for="(tag, index) in openTags" :key="tag.fullPath">
                <el-dropdown trigger="contextmenu" @contextmenu.native="hiddendrop" @command="handleClickmenus">
                    <!-- 标签页 -->
                    <el-tag :class="{ 'active': tag.fullPath == route.fullPath }"
                        :closable="tag.fullPath != '/index/home'" :disable-transitions="false"
                        @close="handleClose(index)" @click="handleClick(index)" v-if="tag.name!='homepage'">
                        <el-icon class="active_icon" v-if="tag.fullPath == route.fullPath">
                            <LocationFilled />
                        </el-icon>
                        {{ $t(tag.title as string )}}
                    </el-tag>
                    <!-- 下拉菜单 -->
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :icon="RefreshRight" :command={code:1,fullPath:tag.fullPath}>{{ $t('herderTags.refresh') }}</el-dropdown-item>
                            <el-dropdown-item :icon="Close" :command={code:2,fullPath:tag.fullPath} 
                            :disabled="index==openTags.length-1||openTags.length==1">{{ $t('herderTags.closerightlabel') }}</el-dropdown-item>
                            <el-dropdown-item :icon="CircleClose" :command={code:3,fullPath:tag.fullPath} 
                            :disabled="openTags.length==1">{{ $t('herderTags.closeall') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, computed} from 'vue'
import { useRouter, useRoute, } from 'vue-router';
import { LocationFilled, RefreshRight, Close, CircleClose } from '@element-plus/icons-vue'//引入图标
import { useTagsStore } from "@/stores/tags";

const store = useTagsStore()

// 标签页
const openTags = computed(()=>store.tagList)

const route = useRoute()
const router = useRouter()
const tags_item = ref()

// 监听路由
watch(route, (route) => {
    if("Index" !== route.matched[0].name){
        return
    }

    let index =-1
    if("productlistcreate" === route.name || "productlistmodify" === route.name){
        let findIndex = openTags.value.findIndex(item => "productlist" === item.name)
        if(-1 !==findIndex){
            // 让商品编辑和商品添加在商品列表后打开
            index = findIndex + 1
        }
    }
    store.pushTag(route,index)
})

if ("Index" !== route.matched[0].name) {
    store.pushTag(route)//创建后，添加当前路由
}

// 点击标签跳转到对应路由
const handleClick = (index: number) => {
    store.clickTag(index)
}

// 移除标签页
const handleClose = (index: number) => {
    store.removeTag(index)
}

// 滚动事件
const handleMouseWheel = (e: { wheelDelta: number; }) => {
    const scrollLeft = tags_item.value.scrollLeft
    const offsetWidth = tags_item.value.offsetWidth;
    const scrollWidth = tags_item.value.scrollWidth;
    if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {
        tags_item.value.scrollLeft =
            tags_item.value.scrollLeft + 100;
    } else if (e.wheelDelta > 0 && scrollLeft > 0) {
        tags_item.value.scrollLeft =
            tags_item.value.scrollLeft - 100;
    }
}

const handleClickmenus = ({ code, fullPath }: { code: number, fullPath: string }) => {
    let open_Tags = openTags.value
    switch (code) {
        case 1://刷新
            let refreshIndex = open_Tags.findIndex((item) => item.fullPath == fullPath)
            store.refresh(refreshIndex)
            break;
        case 2://关闭右侧标签
            let index = open_Tags.findIndex((item) => item.fullPath == fullPath)
            store.closeRight(index)
            break;
        case 3://全部关闭
            store.closeAll()
            break;
        default:
            break;
    }
}

// 模拟点击事件，隐藏弹出下拉框
const hiddendrop = ()=>{
    document.body.click()
}
</script>

<style lang="less" scoped>
.tags_box {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;

    .el-tag {
        margin-right: 10px;
        border-radius: 0;
        background-color: #fff;
        color: #000;
        border: 1px solid #ccc;
        height: 28px;
    }

    .active {
        background-color: #409EFF;
        color: #fff;
        border: 0;
        line-height: 28px;
    }

    .active_icon {
        position: relative;
        top: 1.5px;
    }

    /deep/ .el-icon svg {
        color: rgb(238, 227, 227);
    }

    .scrollbar_box {
        display: flex;
        overflow-x: auto;
        // overflow-x: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .block-col-2 .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
}
</style>